<template>
    <div class="style0">
        <div class="CodeStyle">
            <vue-qr :text="text0+personForm.userID+text2+text+personForm.uname+text2+text1+personForm.health"
                    :correctLevel="3"
                    :size="250"
                    :margin="10"
                    :colorDark=this.color
                    colorLight="white"
                    backgroundColor="white"
                    backgroundDimming="white"
                    :logoScale=".2"
                    :logoMargin="5"
                    logoBackgroundColor="white"
            ></vue-qr>
        </div>

        <!--<div class="style">
            <vue-qr :text="text0+personForm.userID+text2+text+personForm.uname+text2+text1+personForm.health"
                    :correctLevel="3"
                    :size="200"
                    :colorDark=this.color
                    colorLight="white"
                    backgroundColor="white"
                    backgroundDimming="white"
                    :logoScale=".2"
                    :logoMargin="5"
                    logoBackgroundColor="white"
            ></vue-qr>
            &lt;!&ndash;前端加:是可以使用data里的信息字段&ndash;&gt;
        </div>-->
        <div class="style1">
            {{text3}}
        </div>
    </div>
</template>

<script>
    import vueQr from "vue-qr"; //引入二维码生成组件
    export default {
        name: "healthCode",
        data() {
            return {
                text0: "UID:",
                text: "姓名:",
                text1: "健康状况:",
                text2: "---",
                personForm: {
                    userID: "",
                    uname: "",
                    health: "",
                },
                PersonDialog: false,
                color: "#2ba245",


                text3:""
            }
        },
        components: {
            vueQr //二维码生成组件
        },
        created() {
            this.personForm.userID = window.sessionStorage.getItem('UUID')
            this.showPersonDialog();
        },
        methods: {
            async showPersonDialog() {
                const {data: res} = await this.$http.get("getUserByUUID?UUID=" + this.personForm.userID);
                this.personForm = res;
                if (this.personForm.health === "健康") {
                    this.color = "#2ba245"
                }
                if (this.personForm.health === "疑似") {
                    this.color = "#f8d000"
                    this.text3 ="黄码:请及时上报，并做好防护隔离"
                }
                if (this.personForm.health === "确诊") {
                    this.color = "#f60000"
                    this.text3 ="红码:请及时上报，并做好防护隔离"
                }
            }
        }
    }
</script>

<style scoped>
    .style0{
        height: 65%;
    }
    .style {
        display: flex;
        width: 200px;
        margin: 0 auto;
    }
    .style1 {
        font-size: 20px;
        display: flex;
        width: 310px;
        margin: 0 auto;
        height: 100px;
    }
    .CodeStyle {
        display: flex;
        width: 250px;
        margin: 0 auto;
    }
</style>